<script setup lang="ts">
import { ref, reactive, defineEmits } from "vue";
import { useRouter } from "vue-router";
const router = useRouter();
import type { FormInstance, FormRules } from "element-plus";
import { regionDataPlus } from "@/utils/chinaArea";
import Base from "@/views/editor/components/base.vue";
import addArea from "./area.vue";
import tagArr from "@/views/sponsor/info/tagArr.vue";

const ruleFormRef = ref<FormInstance>();
const capitalArr = [
  { label: "民政", value: 1 },
  { label: "基金", value: 2 },
  { label: "社会组织", value: 3 }
];
const ruleForm = reactive({
  capital: 1,
  orUnit: "XXXX民政局",
  username: "孙小小",
  userPhone: "139XXXXXXXX",
  appName: "社区邻里国际共融服务项目",
  appProNum: "XSSDSDSDSD",
  subProName: "社区邻里国际共融服务项目（上城区、滨江区、钱塘区）",
  area: ["330000", "330100", ""],
  numBen: ""
});
const rules = reactive<FormRules>({
  appName: [{ required: true, message: "请输入申报项目名称", trigger: "blur" }],
  appProNum: [
    { required: true, message: "请输入申报项目编号", trigger: "blur" }
  ],
  subProName: [
    { required: true, message: "请输入子项目名称", trigger: "blur" }
  ],
  area: [{ required: true, message: "请选择实施地点", trigger: "blur" }],
  numBen: [{ required: true, message: "请输入受益人数", trigger: "blur" }]
});

let $emit = defineEmits(["submitClick"]);
const submitForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  await formEl.validate((valid, fields) => {
    if (valid) {
      $emit("submitClick", 2);
    } else {
      console.log("error submit!", fields);
    }
  });
};
</script>

<template>
  <div class="text-[20px] font-bold mt-[20px] mb-[20px]">基本信息</div>
  <el-form
    ref="ruleFormRef"
    :model="ruleForm"
    :rules="rules"
    label-width="auto"
    class="demo-ruleForm"
    status-icon
    label-position="top"
    :scroll-to-error="true"
  >
    <el-form-item label="资助项目名称">
      <el-input
        value="杭州青青草公益服务中心 "
        placeholder=""
        disabled
      ></el-input>
    </el-form-item>
    <el-form-item label="资方类型">
      <el-input value="政府" placeholder="" disabled></el-input>
    </el-form-item>
    <el-form-item label="资助方名称" prop="orUnit">
      <el-input
        v-model="ruleForm.orUnit"
        placeholder="请输入资助方名称"
        disabled
        clearable
      />
    </el-form-item>
    <el-form-item label="资方联系人和电话">
      <el-input value="孙一一，135XXXXXXXX" placeholder="" disabled></el-input>
    </el-form-item>
    <el-form-item label="项目负责人" prop="username">
      <el-input
        v-model="ruleForm.username"
        placeholder="请输入项目负责人"
        clearable
      />
    </el-form-item>
    <el-form-item label="项目负责人联系方式" prop="userPhone">
      <el-input
        v-model="ruleForm.userPhone"
        placeholder="请输入项目负责人联系方式"
        clearable
      />
    </el-form-item>
    <el-form-item label="项目名称" prop="appName">
      <el-input
        v-model="ruleForm.appName"
        placeholder="请输入项目名称"
        clearable
      />
    </el-form-item>
    <el-form-item label="申报项目编号" prop="appProNum">
      <el-input
        v-model="ruleForm.appProNum"
        placeholder="请输入申报项目编号"
        clearable
      />
    </el-form-item>
    <el-form-item label="项目周期" prop="subProName">
      <el-date-picker
        v-model="ruleForm.subProName"
        clearable
        type="daterange"
        range-separator="至"
        style="width: 230px"
        start-placeholder="开始时间"
        end-placeholder="结束时间"
        placeholder="请选择时间"
      />
    </el-form-item>
    <el-form-item label="受益人数" prop="numBen">
      <el-input
        v-model="ruleForm.numBen"
        placeholder="请输入受益人数"
        clearable
      />
    </el-form-item>
    <el-form-item label="实施地点" prop="area" class="w-full">
      <addArea @addclick="val => (ruleForm.area = val)" />
    </el-form-item>
    <el-form-item label="自定义标签" class="w-full">
      <tagArr />
    </el-form-item>

    <el-form-item label="项目概述" class="w-full">
      <Base class="border" style="border-color: #ccc" />
    </el-form-item>
  </el-form>
  <div class="h-[40px]"></div>
  <div
    class="flex justify-center m-[10px] w-full p-[20px] bg-white shadow shadow-zinc-200 -left-[10px] relative"
  >
    <el-button @click="router.push({ name: 'projectApplication' })"
      >取消</el-button
    >
    <el-button @click="router.push({ name: 'projectApplication' })"
      >保存草稿</el-button
    >
    <el-button type="primary" @click="submitForm(ruleFormRef)"
      >下一步</el-button
    >
  </div>
</template>

<style lang="scss" scoped>
.demo-ruleForm {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  .el-form-item {
    width: 30%;
    &.w-full {
      width: 100%;
    }
    &.w-1\/2 {
      width: 50%;
    }
  }
}
</style>
